<div>
    <h2 ng-i18next>avAdmin.sidebar.basic</h2>

    <p class="text-muted" ng-i18next>avAdmin.basic.intro</p>

    <form role="form" class="form form-horizontal">
        <!-- title -->
        <div class="form-group">
            <label class="col-sm-2 control-label" for="title" ng-i18next="avAdmin.basic.title.label"></label>
            <div class="col-sm-10">
                <input
                  id="title"
                  class="form-control"
                  type="text"
                  ng-disabled="!electionEditable()"
                  ng-i18next="[placeholder]avAdmin.basic.title.placeholder"
                  ng-model="election.title"/>
            </div>
        </div>

        <!-- description -->
        <div class="form-group">
            <label class="col-sm-2 control-label" for="desc" ng-i18next="avAdmin.basic.description.label"></label>
            <div class="col-sm-10">
                <textarea
                  id="desc"
                  class="form-control"
                  ng-disabled="!electionEditable()"
                  ng-i18next="[placeholder]avAdmin.basic.description.placeholder"
                  ng-model="election.description"></textarea>
            </div>
        </div>

        <!-- auths -->
        <!-- TODO, currently fixed auths -->

        <!-- layout -->
        <div class="form-group hidden">
            <label class="col-sm-2 control-label" for="layout" ng-i18next="avAdmin.basic.layout.label"></label>
            <div class="col-sm-10">
                <p class="text-muted" ng-i18next>
                    avAdmin.basic.layout.placeholder
                </p>
                <div class="radio" ng-repeat="o in layouts">
                    <label>
                        <input
                          type="radio"
                          name="layout"
                          ng-disabled="!electionEditable()"
                          value="{{ o }}"
                          ng-model="election.layout"/>
                        <span ng-i18next="avAdmin.basic.layouts.{{ o }}"></span>
                    </label>
                </div>
            </div>
        </div>

        <!-- theme -->
        <div class="form-group hidden">
            <label class="col-sm-2 control-label" for="theme" ng-i18next="avAdmin.basic.theme.label"></label>
            <div class="col-sm-10">
                <p class="text-muted" ng-i18next>
                    avAdmin.basic.theme.placeholder
                </p>
                <div class="radio" ng-repeat="o in themes">
                    <label>
                        <input
                          type="radio"
                          name="theme"
                          ng-disabled="!electionEditable()"
                          value="{{ o }}"
                          ng-model="election.presentation.theme"/>
                        <span ng-i18next="avAdmin.basic.themes.{{ o }}"></span>
                    </label>
                </div>
            </div>
        </div>

        <!-- share text -->
        <div class="form-group">
            <label class="col-sm-2 control-label" for="share" ng-i18next="avAdmin.basic.share.label"></label>
            <div class="col-sm-10">
                <textarea
                  id="share"
                  class="form-control"
                  ng-disabled="!electionEditable()"
                  ng-i18next="[placeholder]avAdmin.basic.share.placeholder"
                  ng-model="election.presentation.share_text"></textarea>
            </div>
        </div>

        <button ng-click="saveBasic()" class="btn btn-block btn-success" ng-i18next>next</button>
    </form>
</div>
